<template>
  <div class="panel panel-default">
  	<div class="panel-body">
  		<div class="panel panel-default">
		  	<div class="panel-heading">
		  		<h3 class="panel-title">图片上传(支持拖拽)</h3>
		  	</div>
		  	<div class="panel-body" @drop="onDrop($event)" @dragover="allowDrop($event)">
		  		<form action="#" enctype="multipart/form-data">
		  			<div class="uploadFileList" v-if="uploadFiles != ''">
		  				<ul>
		  					<li class="text-center" v-for="(uploadFile, item) in uploadFiles" >
		  						<input class="inputUpload" type="file" name="uploadFile[]" />
		  						<img class="uploadFile" v-bind:src="uploadFile.url" />
		  						<p class="fileType" v-if="uploadFile.type != ''">{{ uploadFile.type }}</p>
		  						<div class="uploadInfo">
		  							<div class="info text-center">
		  								<h3>{{ uploadFile.name }}</h3>
		  								<p class="size">{{ uploadFile.size }}</p>
		  							</div>
		  							<div class="text-right">
		  								<span class="uploadFlag check" title="文档已上传"><i class="glyphicon glyphicon-ok"></i></span>
		  								<span class="btn btn-xs btn-default" title="上传文档"><i class="glyphicon glyphicon-upload"></i></span>
		  								<span class="btn btn-xs btn-default" title="删除文档" @click="deleteObjFun(item)"><i class="glyphicon glyphicon-trash"></i></span>
		  								<span class="btn btn-xs btn-default" title="查看文档" @click="viewDetailImg(item)"><i class="glyphicon glyphicon-zoom-in"></i></span>
		  							</div>
		  						</div>
		  					</li>
		  				</ul>
		  			</div>
		  		</form>
		  		<div class="form-group">
	  				<div class="input-group">
				      <div class="form-control" tabindex = "0" @dragenter="onDragEnter($event)" @dragleave="onDragLeave($event)">一共选{{uploadFiles.length}}个文件</div>
				      <div class="input-group-addon uploadFileBtn">
				      	<input class="uploadInput" type="file" name="file" value="" multiple="multiple"/>
				      	<span class="glyphicon glyphicon-folder-open"></span>
				      	Browse …
				      </div>
				      
				   </div>
	  			</div>
		  	</div>
		  </div>
		  </div>
  	</div>
  </div>
  </div>
</template>

<script>
import '../assets/css/selfUploadImg.css'
import data from '../util/mock'
import axios from 'axios'
import swal from 'sweetalert'
export default {
  name: 'SelfUploadImg',
  data() {
		return {
			uploadFiles:""
		}
	},
	updated() {
	  this.$nextTick(function () {
	    /*整个视图都重绘完毕*/
	   	setTimeout(function(){
		   	$(".uploadFile").each(function(i,item){
					var tempWidth = $(item).width() + 25;
			   	$(item).parents("li").css({"width":tempWidth + "px"});
			  });
		  },100);
	  });
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			var _this = this;
			$("input.uploadInput").on("change",function(){
				var $this = $(this);
				if($this.val() != ''){
					_this.uploadFiles = _this.getObjectURL($this[0].files);
				}
				
			});
		},
		getObjectURL(obj) {
      var objUrlSize = [];
      var uploadFileData = new FormData();
      if(obj.length){
        for(var i = 0; i< obj.length; i++){
            var objTempUrl = "",objTempSize = "",objTempName = obj[i].name,objTempType = "";
            if(/\.(?:png|jpg|gif)$/.test(objTempName)){
			      	if (window.createObjectURL!=undefined) { // normal
	              objTempUrl = window.createObjectURL(obj[i]) ;
	              } else if (window.URL!=undefined) { // firefox
	                objTempUrl = window.URL.createObjectURL(obj[i]) ;
	              } else if (window.webkitURL!=undefined) { // google
	                objTempUrl = window.webkitURL.createObjectURL(obj[i]) ;
	            }
			      }else{
			      	objTempUrl = require("../assets/img/fileIco.png");
			      	var indexEnd = objTempName.lastIndexOf(".") + 1;
			      	objTempType = objTempName.substring(indexEnd);
			      }
            
            var fileSize = obj[i].size / 1024;
            if(fileSize > 1024){
            	objTempSize = (fileSize / 1024).toFixed(2) + "MB";
            }else{
            	objTempSize = fileSize.toFixed(2) + "KB";
            }
            uploadFileData.append("file",obj[i]);
            objUrlSize[i] = {"name": objTempName,"url":objTempUrl,"size":objTempSize,"type":objTempType,"inputValue":obj[i]};
            
        }
      }
      return objUrlSize;
    },
    onDrop(ev){
    	var _this = this;
			ev.preventDefault();
			var data=ev.dataTransfer.files;
			if(data){
				_this.uploadFiles = _this.getObjectURL(data);
				ev.target.classList.remove('inputFocus');
			}
		},
		allowDrop(ev){
			ev.preventDefault();
		},
		onDragEnter(ev){
			if (ev.target.classList.contains('form-control')) {
				ev.target.classList.add('inputFocus');
    	}
		},
		onDragLeave(ev){
			if (ev.target.classList.contains('form-control')) {
      	ev.target.classList.remove('inputFocus');
    	}
		},
    deleteObjFun(obj){
    	var _this = this;
    	swal({ 
			  title: "确定删除吗？", 
			  icon: "warning",
			  dangerMode: true,
			  buttons: {
			    cancel: {
				    text: "Cancel",
				    value: null,
				    visible: true,
				    closeModal: true,
				  },
				  confirm: {
				    text: "OK",
				    value: true,
				    visible: true,
				    closeModal: true
				  }
			  }
			}).then(isConfirm =>{
				if (isConfirm) { 
					_this.uploadFiles.splice(obj,1);
			    swal("删除！", "你选择的文件已被删除。","success",{
			    	button:{
			    		className: "btn-success"
			    	}
			    });
			  } else { 
			    swal("取消！", "你选择的文件是安全的没有被删除","error",{
			    	button:{
			    		className: "btn-success"
			    	}
			    });
			  } 
			});
   },
    viewDetailImg(obj){
    	var _this = this;
    	var slider = document.createElement("img");
			slider.src = _this.uploadFiles[obj].url;
			slider.style.width = '100%';
			swal.stopLoading();
   		swal({ 
			  title: '查看大图', 
			  content:slider,
			  className:"bigView",
			  buttons:{
			  	prev:{
			  		text:"Prev",
			  		value:1,
			  		className:"btn-success prev",
			  		closeModal:false
			  	},
			  	next:{
			  		text:"Next",
			  		value:2,
			  		className:"btn-success next",
			  		closeModal:false
			  	},
			  	cancel:true,
	    }
			});
   		var tempItem = obj;
   		$(".swal-footer .btn-success").on("click",function(){
   			swal.stopLoading();
   			if($(this).hasClass("prev")){
   				tempItem--;
   			}else{
   				tempItem++;
   			}
   			if(tempItem == -1){
   				tempItem = 0;
   			}else if(tempItem == _this.uploadFiles.length){
   				tempItem = _this.uploadFiles.length -1;
   			}
   			$(".bigView .swal-content img").attr("src",_this.uploadFiles[tempItem].url);
   		});
    }
		
	}
}
</script>
